What I'm trying to do is to pass some data from one component to another via router (I'm using Vue-Router-4 with Vue 3.0). But the data that I'm getting back is just "[object Object]" instead of the actual value. Here is what I did. Inside the component that sends the data I have this function
goToQuestions() {
this.$router.push({
name: "QuestionsPage",
params: {
data: this.questions
},
});
},inside my index.js I have this
{
path: "/questions-page",
name: "QuestionsPage",
props: true,
component: () =>
import ('@/views/QuestionsPage.vue')
},And then inside the receiver component I have this snippet
props: ["data"],
mounted() {
console.log("data coming from the router", this.data);
},I am assuming you this.questions is either array or object.
with router it is advised not to send objects and arrays. Instead send an id .
And on the receiver page use that id to fetch the data.
Even if you want to pass object you can try this:
when adding routes, use props's Function mode so that it has a default property user and it will add route.params as props.
{
path: '/questions',
name: 'questions',
component: QuestionsComponent,
props: (route) => ({
user: userData,
...route.params
})
}
use this to push into your route
self.$router.push({
name: 'questions',
params: {
data: this.questions
}
})